<template>
  <div class="app-container">
    <template v-if="!addArticleShow">
      <div class="search-bar">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="标题" prop="title">
            <el-input v-model="queryParams.title" placeholder="请输入标题" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="search" @click="handleSearch">搜索</el-button>
            <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex justify-start bg-white p-[10px]">
        <el-button type="success" icon="plus" @click="handleAddArticle('add')">新增</el-button>
      </div>
      <ArticleList
        class="article-list"
        ref="articleListRef"
        :type="articleType.DIARY.type"
        @editArticle="handleAddArticle('edit', $event)"
        @preview="handlePreview"
      />
      <!-- 添加装修知识- 图文 -->

      <SelectArticleDialog
        v-model:dialogShow="selectArticleDialogShow"
        :type="3"
        @getTemplateType="getTemplateType"
      />
    </template>
    <template v-else>
      <AddArticleNormal
        v-if="showTemplate == 1"
        v-model:dialogShow="addArticleNormalShow"
        :defaultData="activeArticle"
        :type="articleType.DIARY.type"
        @refreshList="initList"
        @backTo="handleBackTo"
        :hasCategory="false"
      />
      <!-- 添加装修知识 - 图文交叉 -->
      <AddArticle
        v-if="showTemplate == 2"
        @backTo="handleBackTo"
        :type="articleType.DIARY.type"
        :defaultData="activeArticle"
        :hasCategory="false"
      />
      <!-- 1 是装修知识的type固定字段 -->
      <!-- 富文本模版 -->
      <AddEditor
        v-if="showTemplate == 3"
        @backTo="handleBackTo"
        :type="articleType.DIARY.type"
        :defaultData="activeArticle"
      ></AddEditor>
    </template>
    <PreViewArticle v-model="previewDialogVisible" :articleData="activeArticle" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import ArticleList from "../components/ArticleList.vue";
import AddArticle from "../components/addArticle/index.vue";
import PreViewArticle from "../components/preViewArticle/index.vue";
import AddEditor from "../components/addEditor/index.vue";
import SelectArticleDialog from "../components/select-article-dialog.vue";
import AddArticleNormal from "../components/addArticleNormal/index.vue";
import { articleType } from "@/enums/aritcle/aritcle";
import { getArticleDetail } from "@/api/article";
import { useRoute } from "vue-router";
const route = useRoute();
const articleListRef = ref(null);
const addArticleShow = ref(false);
const selectArticleDialogShow = ref(false);
const addArticleNormalShow = ref(false);
const activeArticle = ref(null);
const showTemplate = ref(null);
const queryParams = reactive({
  title: "",
});
onMounted(async () => {});

const handleAddArticle = async (type, row) => {
  // 新增- 把之前编辑过的文章默认值去掉，展示选择模版弹框
  if (type === "add") {
    activeArticle.value = null;
    // selectArticleDialogShow.value = true
    addArticleShow.value = true;
    addArticleNormalShow.value = false;
    showTemplate.value = 1;
  } else {
    await getArticleDetailFunc(row.id);
    getTemplateType(row.templateType);
  }
};
/**
 * 编辑文章： 查询文章详情,传入对应编辑组件
 */
async function getArticleDetailFunc(id) {
  try {
    const data = await getArticleDetail(id);
    activeArticle.value = data;
  } catch (err) {
    console.log(err, "err");
  } finally {
  }
}
// 选择文章模版
// 1. 图文展示模版
// 2. 图文交叉模版
const getTemplateType = (templateType) => {
  console.log(templateType, "templateType");
  showTemplate.value = templateType;

  // if (templateType == '1') {
  //   addArticleNormalShow.value = true
  //   // 图文展示模版
  // } else if (templateType == '2') {
  //   // 图文交叉模版
  //   addArticleShow.value = true
  // }
  addArticleShow.value = true;

  selectArticleDialogShow.value = false;
};
const handleBackTo = () => {
  addArticleShow.value = false;
  nextTick(() => {
    initList();
  });
};
const initList = () => {
  articleListRef.value.initList();
};
/**
 * 预览功能
 *
 */
const previewDialogVisible = ref(false);
const handlePreview = async (row) => {
  console.log(row, "row");
  await getArticleDetailFunc(row.id);
  previewDialogVisible.value = true;
};
const queryFormRef = ref(null);
// 重置查询
function handleResetQuery() {
  queryFormRef.value.resetFields();
  articleListRef.value.initList();
}
// 查询
function handleSearch() {
  articleListRef.value.initList();
}

onMounted(() => {
  // 获取路由参数
  if (route.query?.id) {
    articleListRef.value.initList({
      id: Number(route.query.id),
    });
  } else {
    articleListRef.value.initList();
  }
});
</script>

<style scoped>
.article-list {
  height: calc(100vh - 500px);
}
</style>
